<template>
	<view class="container">
		<!-- <button @click="toUrl()">1</button> -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper"
			style="height: 350px;" indicator-color="#f08080">
			<swiper-item>
				<image src="../../static/nclbt.webp" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/nclbt2.webp" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/nclbt3.jpg" mode=""></image>
			</swiper-item>
		</swiper>

		<view class="box" @click="toproduct">
			<view class="">
				<image class="tp1" src="../../static/ncmd.png" mode=""></image>
				<view class="wz1">门店自取</view>
				<view class="wz2">点单无需排队</view>
			</view>

			<view class="">
				<image class="tp2" src="../../static/wm.webp" mode=""></image>
				<view class="wz1">外卖</view>
				<view class="wz2">配送到家</view>
			</view>
		</view>

		<view class="info">
			<view>
				<view class="tm1">积分商城</view>
				<view class="tm2">点击了解详情</view>
				<image src="/static/jifen.png" mode=""></image>
			</view>
			<view>
				<view class="tm1">积分签到</view>
				<view class="tm2">点击了解详情</view>
				<image src="/static/qd.jpg" mode=""></image>
			</view>
			<view>
				<view class="tm1">我的优惠劵</view>
				<view class="tm2">点击了解详情</view>
				<image src="/static/yhj.jpg" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				

			}
		},
		onLoad() {

		},
		methods: {
			toUrl() {
				uni.navigateTo({
					url: "/pages/test/test"
				})
			},
			toproduct() {
				uni.switchTab({
					url: "/pages/product/product"
				})
			}


		}
	}
</script>

<style scoped>
	.swiper image {
		width: 100%;
		height: 100%;
	}

	.container {
		background-color: #f5f5f5;
	}

	.box {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		margin: 20px 10px;
		border-radius: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.tp1 {
		width: 150px;
		height: 120px;
	}

	.tp2 {
		width: 150px;
		height: 120px;
	}

	.box>view view {
		text-align: center;
	}

	.wz1 {
		font-weight: bold;
		font-size: 20px;
	}

	.wz2 {
		font-weight: bold;
		font-size: 15px;
		color: #ccc;
	}

	.info {
		display: flex;
		justify-content: space-around;
	}

	.info view {
		text-align: center;
	}

	.info image {
		width: 70px;
		height: 70px;
	}

	.info>view {
		line-height: 30px;
		background-color: #ccc;
		padding: 20px 10px;
	}

	.tm1 {
		font-size: 22px;
		font-weight: bold;
	}

	.tm2 {
		color: #ccc;
		font-size: 12px;
	}

	.info>view:nth-child(1) {
		background-color: #f3e78c;
	}

	.info>view:nth-child(2) {
		background-color: #fdf7eb;
	}

	.info>view:nth-child(3) {
		background: rgb(242, 246, 229);
	}
</style>